import React, { memo } from "react";

import CJXTopBanner from "./c-cpns/top-banner";
import CJXHotRecommend from "./c-cpns/hot-recommend";
import CJXNewAlbum from "./c-cpns/new-album";
import CJXRecommendRanking from "./c-cpns/recommend-ranking";
import CJXUserLogin from "./c-cpns/user-login";
import CJXSettleSinger from "./c-cpns/settle-singer";
import CJXHotRadio from "./c-cpns/hot-radio";


import { 
    RecommendWrapper,
    Content,
    RecommendLeft,
    RecommendRight
} from "./style";


function CJXRecommend() {

    return (
        <RecommendWrapper>
            <CJXTopBanner />
            <Content className="wrap-v2">
                <RecommendLeft>
                    <CJXHotRecommend />
                    <CJXNewAlbum />
                    <CJXRecommendRanking />
                </RecommendLeft>

                <RecommendRight>
                    <CJXUserLogin />
                    <CJXSettleSinger />
                    <CJXHotRadio />
                </RecommendRight>
            </Content>
            
        </RecommendWrapper>
    )
}

export default memo(CJXRecommend)


// function CJXRecommend(props) {
//     const { getBanners, topBanners } = props;
//     useEffect(() => {
//         getBanners();

//     }, [getBanners]);


//     return (
//         <div>CJXRecommend: {topBanners.length}</div>
//     )
// }

// const mapStateToProps = state => {
//     return {
//         topBanners: state.recommend.topBanners
//     }
// }

// const mapDispatchToProps = dispatch => {
//     return {
//         getBanners: () => {
//             dispatch(getTopBannerAction())
//         }
//     }
// }

// export default connect(mapStateToProps, mapDispatchToProps)(memo(CJXRecommend))